<template>
  <el-card v-for="def in defs" :key="def.id">
    <template #header>
      <div class="card-header">
        <span>{{ def.name }}</span>
      </div>
    </template>
    <el-descriptions class="margin-top" :column="1" :size="size" border>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <location />
            </el-icon>
            Id
          </div>
        </template>
        {{ def.id }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <House />
            </el-icon>
            URL
          </div>
        </template>
        <el-link type="primary">
          {{ def.url }}
        </el-link>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <key />
            </el-icon>
            Key
          </div>
        </template>
        {{ def.key }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <tickets />
            </el-icon>
            name
          </div>
        </template>
        {{ def.name }}
        <el-tag size="small">School</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <office-building />
            </el-icon>
            description
          </div>
        </template>
        {{ def.description || "N/A" }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <Place />
            </el-icon>
            deploymentId
          </div>
        </template>
        {{ def.deploymentId }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <CollectionTag />
            </el-icon>
            deploymentUrl
          </div>
        </template>
        <el-link type="primary">
          {{ def.deploymentUrl }}
        </el-link>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <Link />
            </el-icon>
            resource
          </div>
        </template>
        <el-link type="primary">
          {{ def.resource }}
        </el-link>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <Picture />
            </el-icon>
            diagramResource
          </div>
        </template>
        <el-link type="primary"> 
          {{ def.diagramResource }}
        </el-link>
      </el-descriptions-item>
    </el-descriptions>
  </el-card>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { FlowableService } from "@/api/flowableService";
import {
  Location,
  Link,
  Key,
  OfficeBuilding,
  Tickets,
  Place,
  CollectionTag,
  Picture,
  House,
} from "@element-plus/icons-vue";

import type { ComponentSize } from "element-plus";

const size = ref<ComponentSize>("default");

const iconStyle = computed(() => {
  const marginMap = {
    large: "8px",
    default: "6px",
    small: "4px",
    "": "6px"
  };
  return {
    marginRight: marginMap[size.value] || marginMap.default,
  };
});

const service = new FlowableService(
  "/api/flowable-task/process-api",
  "jack",
  "123456"
);
const defs = ref<any[]>([]);
onMounted(async () => {
  defs.value = await service.listProcessDefinitions();
  console.log(defs);
});
</script>

<style scoped>
.el-descriptions {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}
</style>
